<template>
	<view>
		<!-- 搜索 -->
		<view class="search" style="width: 600upx;margin: 20upx auto;"> 
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="0" left-icon="search">
					<u-input style="width: 75%;margin: 20upx auto;" v-model="form.keywords" placeholder="请输入关键字"/>
				</u-form-item>
			</u-form>
		</view>
		<view>
			<u-row :gutter="15">
				<u-col span="3">
					<view class="navtype act">
						全部
					</view>
					<view class="navtype">
						鲜花装饰
					</view>
					<view class="navtype">
						祭祀套餐
					</view>
					<view class="navtype">
						盆花租赁
					</view>
				</u-col>
				<u-col span="9">
					<image src="../../../static/uview/common/组%203.png" mode="widthFix" style="width: 100%;"></image>
					<view class="shoplist">
						<view class="shopitem" v-for="(item,index) in shopList" :key="index">
							<view class="ingbox">
								<image src="../../../static/uview/common/图层%202.png" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view class="countbox">
								<view class="titles">
									标准套餐
								</view>
								<view class="decoras">
									一束鲜花 一堆蜡烛 一摔香火
								</view>
								<view style="overflow: hidden;" class="footbtn">
									<span class="price" style='float: left;'>价格</span>
									<span class="tobuy" style='float: right;'>
										<button type="default" size="mini" @click="prenum(index,'+')">+</button>
										<input type="number" v-model="item.num" verifyNumber="true"/>
										<button type="default" size="mini" :disabled="parseInt(item.num)<= 0" @click="prenum(index,'-')">-</button>
									</span>
								</view>
							</view>
						</view>
						
					</view>
				</u-col>
			</u-row>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					keywords:''
				},
				shopList:[
					{
						name:'壹',
						num:'1'
					},
					{
						name:'贰',
						num:'2'
					},{
						name:'叁',
						num:'3'
					}
				]
			}
		},
		methods: {
			// 跳转 缅怀英烈 页面
			goTOPeopleList() {
				uni.switchTab({
				    url: '/pages/view/peopleList/peopleList'
				})
			},
			prenum(index,ind){
				if(ind == '-' ){
					if(parseInt(this.shopList[index].num)>=1){
						this.shopList[index].num = parseInt(this.shopList[index].num) - 1
					}
				}else if(ind == '+' ){
					this.shopList[index].num = parseInt(this.shopList[index].num) + 1
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.navtype{
		font-size: 28upx;
		line-height: 67upx;
		height: 67upx;
		text-align: center;
		width: 100%;
		background-color: #F2F2F2;
	}
	.navtype.act{
		font-size:36upx;
		color: #D6A557;
		background-color: white;
	}
	.shopitem{
		position: relative;
		margin: 20upx 0;
		overflow: hidden;
		.titles{
			font-size: 32upx;
			color: #000;
		}
		.decoras{
			font-size: 18upx;
			color: #727272;
		}
		.ingbox{
			float: left;
			width: 33%;
		}
		.countbox{
			float: left;
			width: 66%;
			margin-left: 1%;
		}
	}
	.footbtn{
		position: absolute;
		bottom: 0upx;
		width: 67%;
	}
	.price{
		color: #D6A557;
		font-size: 41upx;
		line-height: 54upx;
		line-height: 71upx;
	}
	.tobuy{
		// background-color: #D6A557;
		font-size: 22upx;
		color: white;
		position: relative;
		top: 10upx;
		padding: 8upx 24upx;
		border-radius: 8upx;
		overflow: hidden;
		// width: 70%;
	}
	
	.tobuy input{
		width: 60upx;
		float: right;
		height: 48upx;
		line-height: 8upx;
		text-align: center;
		color: #333;
		padding: 0;
		min-height: 0;
	}
	.tobuy button{
		width:40upx;
		float: right;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		padding: 0;
		margin: 0;
		border-radius: none;
	}
	.tobuy button::after{
		content: "";
		border-radius: 0;
		border: 1upx solid rgb(230,230,230);
	}
</style>
